<template>
  <div>
    <div style="width: 100%;" class="box">
      <img style="width: 100%;height:auto" :src="img" alt="" />
    </div>
    <view class="algorithmicList">
      <view
        class="algorithmicListCell"
        v-for="(model, index) in listDataSource"
        :key="index"
        @click="openAlgorithmicInfo(model)"
      >
        <view class="algorithmicListCellContainerView">
          <view class="cellLeftStack">
            <view class="cellTitleStack" style="height: 35rpx;">
              <text class="cellTitle">{{ model.cnName }}</text>
              <text class="cellContent1" style="margin-left: 10rpx;">{{
                model.endTime
              }}</text>
            </view>
            <view class="cellTitleStack" style="height: 30rpx;">
              <view
                class="cellDot"
                style="background-color: #53A6DB; margin-top: 5rpx;"
              ></view>
              <text class="cellContent1" style="margin-left: 10rpx;"
                >收益率曲线图</text
              >
              <view
                class="cellDot"
                style="background-color: #E67F4A; margin-top: 5rpx; margin-left: 10rpx;"
              ></view>
              <text class="cellContent1" style="margin-left: 10rpx;"
                >沪深300</text
              >
            </view>
            <view class="cellChartView">
              <canvas
                :canvas-id="model.cnName"
                :id="model.cnName"
                class="charts"
              ></canvas>
            </view>
          </view>
          <view class="cellRightStack">
            <view class="cellRightTop">
              <!-- <view class="cellAutherView">
							<text class="cellContent1">策略作者</text>
							<text class="cellContent1">{{model.author}}</text>
						</view> -->
              <view class="cellAutherView" @click="subscribe">
                <text class="cellContent1">{{ subscribeText }}</text>
              </view>
              <image
                src="../../static/img/arrows_right_icon.png"
                mode="aspectFill"
                style="width: 20rpx; height: 20rpx; margin-left: auto;"
              ></image>
            </view>
            <text
              class="cellTitle"
              style="margin-top: 20rpx; text-align: center;"
              >累计收益</text
            >
            <view class="yieldStack">
              <view
                class="yieldItem"
                style="border-right: 1rpx solid #8E8C8C; border-bottom: 1rpx solid #8E8C8C;"
              >
                <text class="cellContent2" style="text-align: center;"
                  >近一个月</text
                >
                <text class="cellContent3" style="text-align: center;">{{
                  model.oneMonthRate
                }}</text>
              </view>
              <view
                class="yieldItem"
                style="border-bottom: 1rpx solid #8E8C8C;"
              >
                <text class="cellContent2" style="text-align: center;"
                  >近三个月</text
                >
                <text class="cellContent3" style="text-align: center;">{{
                  model.threeMonthRate
                }}</text>
              </view>
              <view class="yieldItem" style="border-right: 1rpx solid #8E8C8C;">
                <text class="cellContent2" style="text-align: center;"
                  >近六个月</text
                >
                <text class="cellContent3" style="text-align: center;">{{
                  model.sixMonthRate
                }}</text>
              </view>
              <view class="yieldItem">
                <text class="cellContent2" style="text-align: center;"
                  >适合资金</text
                >
                <text class="cellContent2" style="text-align: center;"
                  >10～30万</text
                >
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      img: require('../assets/img/' + this.$store.state.Num + '.png')
    }
  }
}
</script>
